<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="../js/common/vue/vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
<!--  a in array  : 变量 in 数组名      -->
        <li v-for="a in array">{{a}}</li>
            <!-- 有下标的写法 -->
<!--        <li v-for="(a,index) in array">{{index}}:{{a}}</li>-->

    </ul>
    <ul>
        <!--遍历对象时固定写法 只可以写     value 写其他的渲染不错来   -->
        <li v-for="value in obj">{{value}}</li>
            <!-- (name,index,value) 循序可以换 ，但是必须是(name,index,value) 写其他的不会渲染
            使用  v-for 时尽量搭配 key 用于唯一标识对象。
            注意我们不推荐在同一元素上使用 v-if 和 v-for
            当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个
            -->
        <li v-for="(name,index,value) in obj" v-bind:key="value">{{name}}+{{value}}+{{index}}</li>
    </ul>
</div>
<script>
    const app =new Vue({
        el:"#app",
        data:{
          array:['菜单一','菜单二','菜单三','菜单四'],
            obj:{
              name:'张三',
                age:6,
                sex:'不详',
                job:'GAI溜子'
            }
        },
        methods:{

        }
    })
</script>
</body>
</html>